import { useEffect, useRef, useState } from 'react';

/**
 * 延迟加载图片的函数
 *
 * @param src 图片的URL地址
 * @returns 返回一个包含imgRef引用和根据isLoaded状态动态改变的src字符串的数组
 */
const useLazyImage = (src: string): [React.RefObject<HTMLImageElement>, string] => {
    // 使用React的useState钩子创建一个状态变量isLoaded，初始值为false
    const [isLoaded, setIsLoaded] = useState(false);
    // 使用React的useRef钩子创建一个引用imgRef，初始值为null
    const imgRef = useRef<HTMLImageElement>(null);

    useEffect(() => {
        // 创建一个IntersectionObserver实例，用于观察目标元素是否进入视口
        const observer = new IntersectionObserver(
            (entries, observer) => {
                // 遍历所有观察到的元素
                entries.forEach((entry) => {
                    // 如果元素进入视口
                    if (entry.isIntersecting) {
                        // 设置isLoaded状态为true
                        setIsLoaded(true);
                        // 停止观察当前目标元素
                        observer.unobserve(entry.target);
                    }
                });
            },
            // 设置观察阈值为0.1，即当目标元素的10%进入视口时触发回调函数
            { threshold: 0.1 }
        );

        // 如果imgRef.current不为null，即已经挂载到DOM中，则开始观察该元素
        if (imgRef.current) {
            observer.observe(imgRef.current);
        }

        // 返回一个清理函数，在组件卸载时执行
        return () => {
            // 如果imgRef.current不为null，则停止观察该元素
            if (imgRef.current) {
                observer.unobserve(imgRef.current);
            }
        };
    }, []);

    // 返回imgRef引用和根据isLoaded状态动态改变的src字符串
    return [imgRef, isLoaded ? src : ''];
};

export default useLazyImage;
